<div class="layuimini-main">

	<form class="layui-form layuimini-form" action="" style="padding-top:20px;" id="recordListSearchForm">

		<div class="layui-form-item">
			<label class="layui-form-label required"> 账号名 </label>
			<div class="layui-input-inline">
				<input type="text" class="layui-input layui-disabled" name="account" id="account" value="" />
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label required"> 旧密码 </label>
			<div class="layui-input-inline">
				<input type="password" name="oldpass" id="oldpassword" required lay-verify="required" autocomplete="off" class="layui-input">
			</div>
			<div style="display: inline" id="tip1"></div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label required"> 新密码 </label>
			<div class="layui-input-inline">
				<input type="password" name="newPass" id="password1" onkeyup="setLength1()" required lay-verify="required"
				 autocomplete="off" class="layui-input">
			</div>
			<div class="layui-form-mid" id="tip2">
				6到16个字符
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label required"> 确认密码 </label>
			<div class="layui-input-inline">
				<input type="password" name="repass" id="password2" onkeyup="setLength2(),setLength1()" required lay-verify="required"
				 autocomplete="off" class="layui-input">

			</div>
			<div class="layui-form-mid" id="tip3">
				6到16个字符
			</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label"></label>
			<div class="layui-input-inline">
				<button type="button" class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn"> 保存 </button>
			</div>
		</div>

	</form>
</div>


<script src="lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
<script src="lib/jq-module/paigusu.min.js" charset="utf-8"></script>
<script>
	var fing = false;
	/* 输入新密码 */
	function setLength1() {
		var num = $("#password1").val().length;
		if (num < 6) {
			fing = false;
			$("#tip2").html("<span>密码太短，请重新输入</span>").css({
				'color': 'red',
				'marginLeft': '15px'
			});
		} else if (num > 16) {
			fing = false;
			$("#tip2").html("<span>密码太长，请重新输入</span>").css({
				'color': 'red',
				'marginLeft': '15px'
			});
		} else {
			fing = true;
			$("#tip2").html("<span>验证通过</span>").css({
				'color': 'green',
				'marginLeft': '15px'
			});
		}
	};
	/* 再次输入新密码 */
	function setLength2() {
		var tmp = $("#password1").val();
		var num = $("#password2").val().length;
		if ($("#password2").val() != tmp) {
			fing = false;
			$("#tip3").html("<span>两次密码输入不一致，请重新输入</span>").css({
				'color': 'red',
				'marginLeft': '15px'
			});
		} else {
			if (num >= 6 && num <= 16) {
				fing = true;
				$("#tip3").html("<span>验证通过</span>").css({
					'color': 'green',
				});
			} else {
				fing = false;
				$("#tip3").html("<span>验证不通过，无效</span>");
			}
		}
	};
	//引用
	layui.use(['form', 'layer'], function() {
		//初始化声明
		var $ = layui.jquery,
			form = layui.form, //将layui中的form组件对象定义成form
			layer = layui.layer;

		//渲染form表单
		form.render();

		/* 旧密码输入框失去焦点时 */
		$("#oldpassword").blur(function() {
			// //获得表单数据
			var password = document.getElementById("oldpassword").value;
			var id = localStorage.getItem("userId");
			console.log(password)
			/* 用ajax验证是否和原来的旧密码相同 */
			$.ajax({
				url: 'http://localhost:8003/sncUserLogin/selPws',
				type: 'put',
				data: JSON.stringify({
					"password": password,
					"id": id
				}),
				contentType: "application/json;charset=UTF-8",
				success: function(data) {
					if (data.data) {
						$("#tip1").html("<span>密码输入正确</span>").css({
							'color': 'green',
							'marginLeft': '15px'
						});
						fing = true;
					} else {
						fing = false;
						$("#tip1").html("<span >密码输入错误</span>").css({
							'color': 'red',
							'marginLeft': '15px'
						});
					}
				},
				error: function(result) {
					console.log(result);
				}
			});
		});
		//给账号赋值
		$("#account").val(localStorage.getItem("count"));

		//监听保存按钮
		form.on('submit(saveBtn)', function(data) {
			if (fing) {
				var password = document.getElementById("password1").value;
				console.log(password)
				/* 用ajax验证是否和原来的旧密码相同 */
				$.ajax({
					url: 'http://localhost:8003/sncUserLogin/updPas',
					type: 'put',
					data: JSON.stringify({
						"password": password,
						"id": localStorage.getItem("userId")
					}),
					contentType: "application/json;charset=UTF-8",
					success: function(data) {
						localStorage.clear();
						layer.confirm('确定更改吗？更改以后将重新登陆。', function(index) {
							window.location = './login.html';
						});
					},
					error: function(result) {
						console.log(result);
					}
				});
			} else {
				layer.confirm('密码输入有误！', function(index) {
					layer.close(index);
				})
			}
		});

	});
</script>
